<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">

  <link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
  <script src="../dist/jsoneditor.js"></script>

  <style type="text/css">
    body {
      font: 10.5pt arial;
      color: #4d4d4d;
      line-height: 150%;
      width: 600px;
      padding-left: 40px;
    }

    html, body {
      width: 100%;
      padding: 0;
      box-sizing: border-box;
    }

    code {
      background-color: #f5f5f5;
    }

    #jsoneditor {
      max-width: 600px;
      width: 90%;
      height: 500px;
    }
  </style>
</head>
<body>

<p>
  Switch editor mode using the mode box.
  Note that the mode can be changed programmatically as well using the method
  <code>editor.setMode(mode)</code>, try it in the console of your browser.
</p>

<div id="jsoneditor"></div>

<script>
  var container = document.getElementById('jsoneditor');

  var schema = {
    "title": "User",
    "type": "object",
    "properties": {
      "firstName": {
        "type": "string"
      },
      "lastName": {
        "type": "string"
      },
      "gender": {
        "enum": ["male", "female"]
      },
      "age": {
        "description": "Age in years",
        "examples": [18, 65],
        "type": "integer",
        "minimum": 0
      },
      "hobbies": {
        "$ref": "hobbies.json"
      }
    },
    "required": ["firstName", "lastName"]
  };

  var hobbiesSchema = {
    "type": "array",
    "items": {
      "type": "string"
    }
  };

  var options = {
    mode: 'code',
    modes: ['code', 'form', 'text', 'tree', 'view', 'preview'], // allowed modes
    schema: schema,
    schemaRefs: {"hobbies.json": hobbiesSchema},
    onError: function (err) {
      console.error('ERROR', err);
    },
    onChange: async () => {
      const errors = await editor.validate()
      if (errors.length === 0) {
        console.log('validation errors: NONE')
        // do something, like persisting the JSON
      } else {
        // show error to the user or something
        console.log('validation errors', errors)
      }
    }
  };

  var json = {
    "firstName": "Jos",
    "lastName": "de Jong",
    "gender": null,
    "age": 34.2,
    "hobbies": [
        "programming",
        "movies",
        "bicycling"
    ]
  };

  var editor = new JSONEditor(container, options, json);

  console.log('json', json);
  console.log('schema', schema);
</script>
</body>
</html>
